<template>
  <el-form :model="article" label-width="120px">
    <el-form-item label="标题" size="large" style="width: 47%">
      <el-input v-model="article.articleTitle" />
    </el-form-item>
    <el-form-item label="创建日期">
      <div class="block">
        <el-date-picker
            v-model="article.createTime"
            type="datetime"
            placeholder="Select date and time"
            value-format="YYYY-MM-DD HH:mm:ss"
            disabled
        />
      </div>
    </el-form-item>
    <el-form-item label="上次修改">
      <div class="block">
        <el-date-picker
            v-model="article.updateTime"
            type="datetime"
            placeholder="Select date and time"
            value-format="YYYY-MM-DD HH:mm:ss"
            disabled
        />
      </div>
    </el-form-item>
    <el-form-item label="文章种类" prop="categoryId">
      <el-select
          v-model="article.categoryId"
          class="m-2"
          placeholder="Select"
          size="large">
        <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.categoryName"
            :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="图片地址">
      <el-input v-model="article.articleCover" style="width: 70%" />
    </el-form-item>

    <el-form-item label="文章内容">
      <el-input v-model="article.articleContent" type="textarea" placeholder="你暂时没有签名" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary"  @click="updateArticle">提交</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import {onMounted, ref} from "vue-demi";
import {inject} from "vue-demi";
import {ElMessage} from 'element-plus'
const request = require("@/utils/request.js")
const router:any = require("@/router/index.js")


const reload:any = inject("reload")
const article = ref({})
const props = defineProps({
  title:String
})
const id = ref(props.title)
const options = ref([])
onMounted(async ()=>{
  let result = await request.get("article/getarticle?articleId="+id.value)
  let data = result.data
  if(data.code === 200){
    article.value = data.data
    console.log(data.msg)
  }else {
    console.log(data.msg)
  }
  let result1 = await request.get("article/category")
  let data1 = result1.data
  if(data1.code === 200){
    options.value = data1.data
    console.log(data.msg)
  }else {
    console.log(data.msg)
  }
})
const updateArticle = async ()=>{

  let result = await request.post("updatearticle",article.value)
  let data = result.data
  if(data.code === 200){
    open(data.msg)
    reload()
  }else {
    open1(data.msg)
  }
}

const open = (msg:string)=>{
    ElMessage({
                message: msg,
                type: "success",
              })
}
const open1 = (msg:string)=>{
    ElMessage({
                message: msg,
                type: "error",
              })
}
</script>
<style>

</style>